<template>
    <div id="FeedBackDetail">
        <Breadcrumb />
        <div class="feedback-container">
            <!-- 基础信息 -->
            <div class="info-title">
                <span class="line"></span>
               <span class="title">基础信息</span>
            </div>
            <!-- 会员基本信息 -->
            <div class="basic-info">
                <ul class="info-data">
                    <li class="one-item">
                        <img :src="detailInfo.userAvatar" alt="">
                        <div class="name">{{detailInfo.userName}}</div>
                    </li>
                    <li class="item">
                        <ul class="all-every">
                            <li class="is-every">用户ID</li>
                            <li class="is-every">反馈类型</li>
                        </ul>
                    </li>
                    <li class="item-is">
                         <ul class="all-every">
                            <li class="is-every">{{detailInfo.userId}}</li>
                            <li class="is-every">{{detailInfo.typeValue}}</li>
                        </ul>
                    </li>
                    <li class="item">
                         <ul class="all-every">
                            <li class="is-every">手机号</li>
                            <li class="is-every">反馈时间</li>
                        </ul>
                    </li>
                    <li class="item-is">
                        <ul class="all-every">
                            <li class="is-every">{{detailInfo.userPhone || '-'}}</li>
                            <li class="is-every">{{detailInfo.createTime}}</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 反馈内容 -->
            <div class="feedback-content">
                <div class="content-left">反馈内容</div>
                <div class="content-right">
                    <div class="content">{{detailInfo.feedbackContent}}</div>
                    <template v-for="(item, index) in detailInfo.feedbackPic">
                        <div class="content-img" :style="`background-image: url(${item})`" @click="amplification(item)" :key="index">
                        </div>
                    </template>
                </div>
            </div>
            <!-- 处理编辑 -->
             <div class="info-title">
                <span class="line"></span>
               <span class="title">处理编辑</span>
            </div>
            <div class="information">
                <a-form-model class="remark-form" layout="horizontal" v-bind="{ labelCol: { span: 4 }, wrapperCol: { span: 20 } }">
                    <a-form-model-item label="备注">
                        <a-textarea
                            :autosize="{ minRows: 5 }"
                            v-model="detailInfo.remark"
                            placeholder="请输入备注信息(不超过80字)"
                            maxlength="80"
                        />
                    </a-form-model-item>
                </a-form-model>
            </div>
            <a-button type="primary" class="submit-btn" :loading="isSubmit" :disabled="isSubmit" @click="updateRemark">保存</a-button>
            <!-- 放大图片 -->
            <div class="bigBg"
                @click="hideSale"
                v-show="showScaleImg">
                <div class="imgBox">
                    <img :src="imgurl" class="imgBox-img" alt="" >
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import util from '@/util/util'

@Component
export default class FeedBackDetail extends Vue {
    title: string = '详情'
    showScaleImg: boolean = false // 放大图片
    labelPosition: string = 'right'
    detailInfo: any = { remark: '' } // 详情信息
    imgurl: string = ''
    typeList: any = {
        'PRODUCT': '产品问题',
        'FUNCTION': '功能问题',
        'EXPERIENCE': '体验问题',
        'OTHER': '其他问题'
    }
    isSubmit: boolean = false

    get feedbackId () {
        return this.$route.query.feedbackId
    }

    // 初始化
    init () {
        this.getCommentDetail();
    }
    // 获取意见反馈详情
    getCommentDetail () {
        let data = {
            feedbackId: this.feedbackId
        }
        this.$api.feedbackDetailFetch(data).then((res: any) => {
            this.detailInfo = res.data
            this.detailInfo.feedbackPic = (this.detailInfo.feedbackPic && this.detailInfo.feedbackPic.split(','))
        }).catch()
    }
    goBack () {
        this.$router.back()
    }
    // 上传备注信息
    updateRemark () {
        this.isSubmit = true
        let data = {
            feedbackId: this.feedbackId,
            remark: this.detailInfo.remark
        }
        this.$api.feedbackHandleFetch(data).then((res: any) => {
            this.isSubmit = false
            this.$message.success('保存成功');
            this.goBack()
        }).catch(() => {
            this.isSubmit = false
        })
    }
    // 放大图片
    amplification (imgUrl: string) {
        this.showScaleImg = !this.showScaleImg
        this.imgurl = imgUrl
    }
    // 隐藏图片
    hideSale () {
        this.showScaleImg = false;
    }
}
</script>

<style lang="scss">
#FeedBackDetail {
    .feedback-container{
        background: #fff;
        min-width: 1260px;
        margin: 20px;
        padding: 20px 0 20px 0;
        .info-title{
            .line{
                width: 3px;
                height: 20px;
                background: #333;
                display:inline-block;
                margin-right: 10px;
                vertical-align:middle;
            }
            .title{
                color: #333;
                vertical-align:middle;
            }
        }
        // 基础信息
        .basic-info {
            min-width: 1260px;
            margin: 20px 0 0 40px;
            box-sizing: border-box;
            .info-data {
                overflow: hidden;
                .item{
                    float: left;
                    min-width: 120px;
                    border-top: 2px solid #eee;
                    background: #f9fafc;
                }
                .one-item, .item-is{
                    min-width: 200px;
                    float: left;
                    border: 2px solid #eee;
                    background: #f9fafc;
                }
                .one-item{
                    height: 86px;
                    img{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        margin: 5px  auto;
                    }
                    .name{
                        margin-bottom: 11px;
                    }
                    .name,.type{
                        text-align: center;
                    }
                    .type{
                        height: 25px;
                        line-height: 25px;
                        width: 70px;
                        background: #333;
                        color: #fff;
                        border-radius: 5px;
                        margin: 0 auto;
                        font-size: 12px;
                        font-weight: 600;
                    }
                }
                .item-is{
                    background:#fff;
                    min-width: 300px;
                }
                .item-is{
                    border-bottom: none;
                }
                .all-every{
                    .is-every{
                        // width: 100%;
                        height: 42px;
                        line-height: 42px;
                        text-align: center;
                        border-bottom: 2px solid #eee;
                        img{
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            display: inline-block;
                            vertical-align: middle;
                            margin-right: 5px;
                        }
                        .recommender-user-name{
                            vertical-align: middle;
                            color: #333
                        }
                    }
                }
            }
        }
        // 反馈内容
        .feedback-content{
            width: 1040px;
            box-sizing: border-box;
            display: flex;
            margin: 0 0 40px 40px;
            .content-left{
                width: 200px;
                border: 2px solid #eeeeee;
                border-top: none;
                background: #f9fafc;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .content-right{
                flex: 1;
                border-right: 2px solid #eee;
                border-bottom: 2px solid #eee;
                .content{
                    font-size: 12px;
                    padding: 20px;
                }
                .content-img{
                    width: 150px;
                    height: 100px;
                    margin-left: 20px;
                    display: inline-block;
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    cursor: pointer;
                    .img-content{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        // 处理编辑
        .information{
            display: flex;
            .remark-form{
                width: 550px;
            }
        }
        .submit-btn{
            margin: 30px 0 20px 157px;
        }
        // 放大图片
        .bigBg {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            z-index: 9999;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .imgBox {
            position: absolute;
            width: 500px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .imgBox-img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
